﻿@using RuoVea.ExDto
@using RuoVea.OmiArticle.Attributes
@using RuoVea.OmiArticle
@using RuoVea.OmiArticle.Language
@using RuoVea.OmiArticle.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(i18n.category_management)</title>
   <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style> .el-button [class*="el-icon-"] + span { margin-left: 1px !important; } </style>
</head>
<body>
    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange" 
                   :cell-style="cellStyle"
                   v-on:on-load="onLoad">
            <template slot="avatar" slot-scope="scope">
                <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
            </template>
            <template slot="record" slot-scope="scope">
                <modify-record :data="scope.row"></modify-record>
            </template>

        </avue-crud>
    </div>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script>
        Vue.prototype.i18n.messages.zhCN = { ...Vue.prototype.i18n.messages.zhCN, ...{ "cannot_select_self ": "上级节点不能选择自己", "parentNode": "上级节点", "name": "名称", "category": "所属分类", "property_value": "属性值", "dictionary_value": "字典值", "is_default": "是否默认", "DisplayText": "显示文本", "Tag Type": "标签类型", "Style (Style)": "样式(Style)", "Style (Class)": "样式(Class)", "Extended  Data": "拓展数据" } };
        Vue.prototype.i18n.messages.en = { ...Vue.prototype.i18n.messages.en, ...{ "cannot_select_self": "Cannot sele ct self as parent node", "parentNode ": "Parent Node", "name": "Name", "category": "Belongs to Category", "property_value": "Property Value", "dictionary_value": "Dictionary Value", "is_default": "Is Default", "DisplayText": "Display Text", "TagType": "Tag Type", "Style (Style)": "Style (Style)", "Style (Class)": "Style (Class)", "Extended Data": "Extended Data" } };
        Vue.prototype.i18n.messages.fr = { ...Vue.prototype.i18n.messages.fr, ...{"cannot_select_self": "Impossible de se sélectionner soi-même comme nœud parent", "parentNode": "Nœud parent","name ": "Nom","category": "Catégorie associée ","property_value": "Valeur de propriété","di ctionary_value": "Valeur de  dictionnaire","is_default": "Par défaut","Display Text": "Texte affiché", "TagType": "Type de balise", "Style (Style)": "Style (Style)", "Style (Class)": "Style (Cl ass)", "Extended Data": "Données étendues"} };
        Vue.prototype.i18n.messages.ja = { ...Vue.prototype.i18n.messages.ja, ...{"cannot_select_self": "自身を親ノードとして選択できません", "parentNode": "親ノード","name": "名称","categor y": "所属カテゴリ","property_value": "プロパティ値", "dictionary_v alue": "辞書値","is_default":  "デフォルトかどうか","Display Text": "表示テキスト", "TagType": "タグの種類", "Style (Style)": "スタイル（Style）", "Style (Class)": "スタイル（Class）", "Extended D ata": "拡張データ"} };
        Vue.prototype.i18n.messages.vi = { ...Vue.prototype.i18n.messages.vi, ...{"cannot_select_self": "Không thể chọn chính mình làm nút cha", "parentNode": "Nút cha","name": "Tên","category": "Phân loại thuộc về","property_value": "Giá trị thuộc tính","dictionary_value": "Giá trị từ điển","is_default": "Có phải mặc định không","Display Text": "Văn bản hiển thị", "TagType": "Loại thẻ", "Style (Style)": "Kiểu (Style)", "Style (Class)": "Kiểu (Class)", "Extended Data": "Dữ liệu mở rộng"} };
        Vue.prototype.i18n.messages.zhTW = { ...Vue.prototype.i18n.messages.zhTW, ...{ "cannot_select_self ": "上級節點不能選擇自己","parentNo de": "上級節點","name": "名稱"," category": "所属分类","property_value": "属性值","dictionary_value": "字典值","is_default": "是否默认", "Display Text": "顯示文本", "TagType": "標籤類型", "Style (Style)" : "樣式(Style)", "Style (Class)": "樣式(Class)", "Extended Data": "擴展數據"} };
     </script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>
    <script>
        var tagTypeData = [{ label: `primary`, value: `primary`, }, { label: `success`, value: `success`, },{ label: `info`, value: `info`, },{ label: `warning`, value: `warning`,},{ label: `danger`, value: `danger`, }];
        new Vue({
            el: '#app',
            data() {
                return {

                    name: "category",
                    pageUrl: "/category/pages",
                    addUrl: "/category/add",
                    editUrl: "/category/update",
                    deleteUrl: "/category/delete",
                
                    pageOption: {
                        total: 0,
                        page: 1,
                        pageSize: 10
                    },
                    loading: true,
                    btnLoading: false,
                    tableData: [],
                    searchParams: {},
                    
                    currentEditId:null,

                    option: {
                        searchShowBtn: Permissions.avePermission(`category:pages`),
                        refreshBtn: Permissions.avePermission(`category:pages`),
                        addBtn: Permissions.avePermission(`category:addData`),
                        editBtn: Permissions.avePermission(`category:updateData`),
                        delBtn: Permissions.avePermission(`category:deleteData`),
                        viewBtn: Permissions.avePermission(`category:data`), 
                        // tree:true,
                        // treeProps:{  
                        //     children: 'children',
                        //     hasChildren: 'hasChildren'
                        // },
                        defaultExpandAll: true,
                        rowKey: 'id',
                        searchShow: false,
                        dialogWidth:"650",
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
        
                            { prop: 'pId', label: `${this.i18n.t('parentNode')}`, hide: true, addDisplay: true, editDisplay: true, value: 0, searchValue:"0", type: "select", dicFlag: true, dicUrl: `/category/list?isRoot=1&&currentEditId=${this.currentEditId}`, dicMethod: 'get', props: { label: "name", value: "id" }, dicFormatter: (data) => { return [{ name: '根节点', id: 0 }, ...data]; },
                            rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` },], 
                            },
                           
                            { prop: "name", label:`${this.i18n.t('name')}`,  search: true, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                          
                            { prop: "code", label: `${this.i18n.t('code')}`, search: true, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                           
                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio", dicData: disableDicData, width: '80', },
                            { prop: "sort", label: `${this.i18n.t('sort')}`, search: false, hide: false, type: "number", step: 100, value: 100, width: '80',clearable: false },
                           
                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: false, showColumn: false, span: 24, rows: 2, },

                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, width: '80',minWidth: 140, },
                        ]
                    }
                }
            },
            created() {
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (column.property === 'isDisable') {
                      return  { color: row.isDisable == 0 ? '#409eff' : '#f56c6c' };
                    }
                },
                hasPermission(key) {
                    if (key === 'columnBtn' || key === 'menu' || key === 'refreshBtn') return true;
                    else return Permissions.avePermission(`${this.name}:${key}`);
                },
                onLoad(page, done) {
                    var data = { ...page, ...this.searchParams , ...{ PId:0 }};
                    this.$http.post(`${this.pageUrl}`, data).then((res) => {
                        this.tableData = res.rows;
                        this.pageOption.total = res.totalRows;
                        this.loading = false;
                        if (done) { done(); }
                    }).catch(e => {
                        this.loading = false;
                        console.log(e);
                    });
                },
                searchChange(params, done) {
                    this.searchParams = params;
                    this.pageOption.page = 1;
                    this.onLoad(this.pageOption, done);
                },
                resetChange(item) {
                    this.searchParams = item;
                    this.pageOption.page = 1;
                    this.onLoad(this.pageOption);
                },
                refreshChange() { this.onLoad(this.pageOption); },
                handleRowSave(form, done, loading) {
                    form.confirm = form.password;
                    this.$http.post(`${this.addUrl}`, form).then((res) => {
                        loading();
                        if (res == true) {
                            this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                            done(form);
                            this.pageOption.page = 1;
                            this.onLoad(this.pageOption);
                        }
                    }).catch(e => {
                        loading();
                    });
                },
                handleRowUpdate(row, index, done, loading) {
                    if (row.pId === row.id) {
                        this.$message.error(`${this.i18n.t('cannot_select_self')}`);
                        loading();
                        return;
                    }
                    this.$http.post(`${this.editUrl}`, row).then((res) => {
                        console.log("res===",res)
                        loading();
                        if (res == true) {
                            this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                            done(row);
                            this.refreshChange();
                        }
                    }).catch(e => {
                        loading();
                    });
                },
                handleRowDel(form, index, done) {
                    this.$confirm(this.i18n.t('confirmdelete'), this.i18n.t('tips'), { confirmButtonText: this.i18n.t('determine'), cancelButtonText: this.i18n.t('cancel'), type: 'warning', customClass: "elmessagebox" }).then(() => {
                        let data = { id: form.id };
                        this.$http.delete(`${this.deleteUrl}`, { data, headers: { 'Content-Type': 'application/json' } }).then((res) => {
                            if (res == true) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                done(form)
                            }
                        });
                    }).catch(_ => { loading(); console.info(_); })
                }
            }
        });
    </script>
</body>
</html>